<template>
  <view>
    <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
      <view
        class="cu-bar fixed"
        :style="style"
        :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]"
      >
        <view class="action" @tap="goBackPage" v-if="isBack">
          <text class="cuIcon-back"></text>
          <slot name="backText"></slot>
        </view>
        <view class="action" @tap="goBackPageCustomer" v-if="isBackCustomer">
          <text class="cuIcon-back"></text>
          <slot name="backText"></slot>
        </view>
        <slot name="left"></slot>
        <view class="content" :style="[{ top: StatusBar + 'px' }]">
          <slot name="content"></slot>
        </view>
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
    }
  },
  name: "cu-custom",
  computed: {
    style() {
      var StatusBar = this.StatusBar
      var CustomBar = this.CustomBar
      var bgImage = this.bgImage
      var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`
      if (this.bgImage) {
        style = `${style}background-image:url(${bgImage});background-size: 250px 30px;`
      }
      return style
    },
  },
  props: {
    bgColor: {
      type: String,
      default: "",
    },
    isBack: {
      type: [Boolean, String],
      default: false,
    },
    isBackCustomer: {
      type: [Boolean, String],
      default: false,
    },
    bgImage: {
      type: String,
      default: "",
    },
  },
  methods: {
    goBackPage() {
      if (getCurrentPages().length < 2 && "undefined" !== typeof __wxConfig) {
        let url = "/" + __wxConfig.pages[0]
        return uni.redirectTo({ url })
      }
      uni.navigateBack({
        delta: 1,
      })
    },
    goBackPageCustomer() {
      this.$emit("goBack");
    },
  },
}
</script>

<style>
</style>
